<template>
  <div class="setUp">
    <Header></Header>
    <div class="w">
      <Breadcrumb :breadcrumbs="breadcrumbs" />
      <div class="setList">
        <p>{{$t('set.verify_title')}}</p>
        <ul>
          <li>
            <p>
              <span>1</span>{{$t('set.verify_stept_first')}}</p>
            <span></span>
            <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605">
              <i></i>
              {{$t('home.ios_download')}}
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">
              <i></i>
              {{$t('home.android_download')}}
            </a>
          </li>
          <li>
            <p>
              <span>2</span>{{$t('set.verify_stept_two')}}</p>
              <img class="qrcode" :src='ver.google_url' alt="">
          </li>
          <li>
            <p>
              <span>3</span>{{$t('set.verify_stept_three')}}</p>
            <span>{{ver.key}}</span>
          </li>
          <li>
            <p>
              <span>4</span>{{$t('set.verify_stept_four')}}</p>
            <input type="text" v-model="code">
            <span class="buttonBind" @click="bindGoogle()">{{$t('btn.binding')}}</span>
          </li>
        </ul>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Breadcrumb from '@/components/Breadcrumb';
import { setUpVerify, bindingGoogle } from '@/api';
import { mapGetters, mapMutations } from 'vuex';

export default {
  components: {
    Header,
    Footer,
    Breadcrumb,
  },
  data() {
    return {
      ver: {},
      code: '',
      breadcrumbs: [{
        path: '/',
        titleKey: 'router.home',
      }, {
        path: '/setup',
        titleKey: 'router.set',
      }, {
        path: '/verifier',
        titleKey: 'router.verifier',
      }],
    };
  },
  computed: {
    ...mapGetters(['subCuid']),
  },
  created() {
    setUpVerify({ uid: this.subCuid })
      .then((res) => {
        if (res.data.status === 1) {
          this.ver = res.data.data;
        }
      }).catch();
  },
  methods: {
    ...mapMutations(['SET_GOOGLE_VERIFY', 'SET_GOOGLE_CODE']),
    bindGoogle() {
      if (!this.code.trim()) {
        this.$message({
          message: this.$t('login.google_code_input'),
          type: 'warning',
        });
        return;
      }
      bindingGoogle({
        key: this.ver.key,
        code: this.code,
      }).then((res) => {
        if (res.data.status === 1) {
          this.$message({
            message: res.data.msg,
            type: 'success',
          });
          this.SET_GOOGLE_CODE(this.ver.key);
          this.SET_GOOGLE_VERIFY(1);
          this.$router.go(-1);
        } else {
          this.$message({
            message: this.$t(`api.${res.data.errcode}`),
            type: 'warning',
          });
        }
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
      });
    },
  },
};
</script>
<style scoped lang="scss">
.setUp {
  .setList {
    border-radius: 5px;
    border: 1px solid #eaeaea;
    > p {
      height: 50px;
      line-height: 50px;
      background-color: #f9f9f9;
      padding: 0 25px;
      box-sizing: border-box;
      color: #71a0b9;
      font-size: 12px;
      width: 100%;
    }
    ul {
      color: #000;
      font-size: 12px;
      padding: 0 80px 150px !important;
      background-color: #ffffff;
      li {
        overflow: hidden;
        height: 300px;
        border-bottom: 1px solid #cccccc;
        padding-top: 69px;
        box-sizing: border-box;
        p {
          height: 43px;
          line-height: 43px;
          color: #70c1b3;
          font-size: 24px;
          span {
            width: 21px;
            height: 21px;
            line-height: 21px;
            text-align: center;
            background-color: #70c1b3;
            border-radius: 50%;
            font-size: 12px;
            color: #fff;
            display: inline-block;
            margin-right: 43px;
            margin-top: 11px;
            vertical-align: top;
          }
        }
        &:nth-of-type(1) {
          > span {
            float: left;
            &:nth-child(2) {
              display: inline-block;
              width: 100px;
              height: 100px;
              margin-top: 44px;
              margin-left: 69px;
              background: url(../../assets/images/gv.png) no-repeat;
              background-size: 100% 100%;
            }
          }
          img.qrcode{
            width: 100px;
            height: 100px;
            display: inline-block;
            margin-top: 44px;
            margin-left: 69px;
          }
          a {
            margin-top: 74px;
            margin-left: 19px;
            text-align: center;
            width: 170px;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            color: #70c1b3;
            font-size: 14px;
            i {
              font-style: normal;
              width: 21px;
              height: 24px;
              display: inline-block;
              margin-right: 18px;
              background: url(../../assets/images/apple.png) no-repeat;
              margin-right: 18px;
              vertical-align: middle;
            }
            &:nth-of-type(2) {
              i {
                background: url(../../assets/images/android.png) no-repeat;
              }
            }
          }
        }
        &:nth-of-type(2) {
          img.qrcode{
            width: 100px;
            height: 100px;
            display: inline-block;
            margin-top: 44px;
            margin-left: 69px;
          }
        }
        &:nth-of-type(3) {
          > span {
            margin-left: 69px;
            margin-top: 51px;
            display: inline-block;
            padding: 0 12px;
            height: 40px;
            line-height: 40px;
            background-color: #cccccc;
            border-radius: 3px;
            font-size: 24px;
            color: #ffffff;
          }
        }
        &:nth-of-type(4) {
          > input {
            margin-left: 69px;
            margin-top: 66px;
            width: 112px;
            line-height: 26px;
            padding: 7px 13px;
            border: none;
            outline: none;
            background-color: #cccccc;
            border-radius: 3px;
            color: #fff;
            font-size: 24px;
            vertical-align: top;
          }
          .buttonBind {
            margin-left: 15px;
            margin-top: 68px;
            display: inline-block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;;
            background-color: #70c1b3;
            border-radius: 20px;
            border: none;
            outline: none;
            color: #fff;
            font-size: 15px;
            vertical-align: top;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
